{% load i18n static common %}
{% autoescape off %}
    <div id="{{ model_name }}_edit_form" style="padding: 10px; height: 550px;width: 880px;">
        <form class="layui-form action-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}"
              enctype="multipart/form-data">
            {% csrf_token %}
            {% with form.form as f %}
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-top: 10px">
                        <div class="layui-row">
                            <div class="layui-col-md12">
                                <div class="layui-card-header"><i class="fa fa-bell-o"></i><span
                                        style="padding-left: 5px">{% trans 'menu_sys_personalAlert' %}</span>
                                </div>
                                <div class="layui-card-body" style="margin: 10px">
                                    <div class="layui-form-item">
                                        {% layui_inline f.code %}
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline field-before">
                                            <label class="layui-form-label"
                                                   for="id_type">{% trans 'personalAlert_field_employee' %}</label>
                                            <div class="layui-input-inline ">
                                                <input name="type" id="id_type" lay-filter="id_type" value=""
                                                       class="layui-input" readonly>
                                                <div id="employee_origin">
                                                    <script>
                                                        var employee_origin_name = '';
                                                        var globalEmpSelected = [];
                                                        {% if f.instance.id %}
                                                            {% for item in f.instance.employee.all %}
                                                                employee_origin_name = '{{ item.emp_code }}' + ',' + employee_origin_name;
                                                                var emp_item = {
                                                                    id: {{ item.id }},
                                                                    emp_code: '{{ item.emp_code }}',
                                                                    {% if item.first_name %}
                                                                        first_name: '{{ item.first_name }}',
                                                                    {% else %}
                                                                        first_name: '',
                                                                    {% endif %}
                                                                    {% if item.last_name %}
                                                                        last_name: '{{ item.last_name }}',
                                                                    {% else %}
                                                                        last_name: '',
                                                                    {% endif %}
                                                                    {% if item.department.dept_name %}
                                                                        dept_name: '{{ item.department.dept_name }}',
                                                                    {% else %}
                                                                        dept_name: '',
                                                                    {% endif %}
                                                                }
                                                                globalEmpSelected.push(emp_item)
                                                            {% endfor %}
                                                            $('#employee_origin').append('<input type="hidden" name="employee" value="{{ f.instance.employee.id }}"/>');
                                                            $('#id_type')[0].value = employee_origin_name;
                                                        {% endif %}
                                                    </script>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab layui-tab-brief" lay-filter="employee_profile_tabs">
                    <ul class="layui-tab-title">
                        <li lay-id="emp_detail"
                            class="layui-this">{% trans 'messengerSetting_messageType_intradayAttendanceSummary' %}</li>
                        <li lay-id="emp_app">{% trans 'personalAlert_field_messengerSetting' %}</li>
                        <li lay-id="emp_app3">{% trans 'personalAlert_field_realTimeConfig' %}</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item layui-hide">
                                {% layui_inline f.is_enble_alert %}
                            </div>
                            <div class="layui-form-item layui-col-md12">
                                <div class="layui-inline">
                                    {% layui_inline f.late_exceeds %}
                                    <div class="layui-form-mid layui-word-aux"
                                         style="float: right;">{% trans 'alertSettingPage_exceedUnit_times' %}</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    {% layui_inline f.early_leave_exceeds %}
                                    <div class="layui-form-mid layui-word-aux"
                                         style="float: right;">{% trans 'alertSettingPage_exceedUnit_times' %}</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    {% layui_inline f.absent_exceeds %}
                                    <div class="layui-form-mid layui-word-aux"
                                         style="float: right;">{% trans 'alertSettingPage_exceedUnit_times' %}</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_label_emailSendingFrequency' %}<span
                                        class="required">*</span></div>
                                <div class="layui-input-inline">
                                    <select name="sending_frequency" id="id_sending_frequency" class="layui-input"
                                            lay-filter="sending_frequency">
                                        <option value="0">{% trans 'frequency_option_none' %}</option>
                                        <option value="3">{% trans 'frequency_option_daily' %}</option>
                                        <option value="2">{% trans 'frequency_option_weekly' %}</option>
                                        <option value="1">{% trans 'frequency_option_monthly' %}</option>
                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline layui-hide" style="width: 30px"
                                         title="{% trans 'sending_alert' %}">
                                        <input type="checkbox" name="exception_alert" lay-skin="primary" title="">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">{% trans 'personalAlert_field_day' %}<span
                                            class="required">*</span></div>
                                    <div class="layui-input-inline">
                                        <select name="day" id="id_email_day" class="layui-input"></select>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">{% trans 'personalAlert_field_time' %}<span
                                            class="required">*</span></div>
                                    <div class="layui-input-inline">
                                        <input type="text" id="id_time" name="time" autocomplete="off"
                                               placeholder="" lay-verify="required" class="layui-input">
                                    </div>

                                </div>
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.include_today %}
                            </div>
                            <div class="layui-form-item layui-hide">
                                {% layui_inline f.alert_type %}
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.email_alert %}
                                {% layui_inline f.messenger_alert %}
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-card-body" style="margin: 10px">
                                <div class="layui-form-item">
                                    {% layui_inline f.bot_uid %}
                                </div>
                                <span class="color_orange" style="color: #7ac142;float: left;">{% trans 'messenger_field_messengerAlertNotify' %}</span>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item">
                                {% layui_inline f.is_enble_messenger %}
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.message_head %}
                                {% layui_inline f.message_tail %}
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.receive_app_transaction %}
                                {% layui_inline f.receive_photo %}
                            </div>
                            <div class="layui-form-item layui-hide">
                                {% layui_inline f.real_time %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endwith %}
        </form>
    </div>
    <script>
        layui.use(['form', 'layer', 'laydate'], function () {
            var form = layui.form, layer = layui.layer, laydate = layui.laydate;
            var table = layui.table;
            laydate.render({
                elem: '#id_time'
                , type: 'time'
                , value: '00:00:00'
            });
            form.render();

            function dayChange(f, d) {
                switch (f) {
                    case '1':   //Monthly
                        var options = '';
                        for (var i = 1; i < 32; i++) {
                            options += '<option value="' + i + '">' + i + '</option>';
                        }
                        $("#id_email_day").html(options);
                        form.render('select');
                        $("#id_email_day").val(d);
                        break;
                    case '2':   //Weekly
                        var options = ''
                            + '<option value="' + 0 + '">' + gettext('monday') + '</option>'
                            + '<option value="' + 1 + '">' + gettext('tuesday') + '</option>'
                            + '<option value="' + 2 + '">' + gettext('wednesday') + '</option>'
                            + '<option value="' + 3 + '">' + gettext('thursday') + '</option>'
                            + '<option value="' + 4 + '">' + gettext('friday') + '</option>'
                            + '<option value="' + 5 + '">' + gettext('saturday') + '</option>'
                            + '<option value="' + 6 + '">' + gettext('sunday') + '</option>';
                        $("#id_email_day").html(options);
                        $("#id_email_day").val(d);
                        form.render('select');
                        break;
                    case '3':   //Daily
                        var options = '<option value="' + 1 + '">' + 1 + '</option>';
                        $("#id_email_day").html(options);
                        $("#id_email_day").val(1);
                        form.render('select');
                        break;
                    default:
                        break;
                }
            }

            $('#id_type').click(function () {
                $.ajax({
                    url: "/personnel/employee_frame/",
                    type: "GET",
                    dataType: "html",
                    success: function (pannel) {
                        layer.open({
                            type: 1,
                            title: "{% trans 'messenger_field_employee' %}",
                            zIndex: 1003,
                            area: ['1080px', '550px'],
                            content: pannel,
                            btn: [gettext("btn_confirm"), gettext("btn_cancel")],
                            success: function (layero, index) {
                                for (i = 0; i < globalEmpSelected.length; i++) {
                                    globalEmpSelected[i]['LAY_CHECKED'] = true;
                                }
                                var selected_table = table.reload('id-employee-frame-selected', {data: globalEmpSelected});
                                var unselect = table.reload('id-employee-frame-unselect');
                            },
                            yes: function (index, layero) {
                                var name_val = $('#employeeFrameSelectedDetailContainer').val()
                                $('#id_type')[0].value = name_val;
                                $('#employee_origin').html('')
                                globalEmpSelected = layui.table.checkStatus('id-employee-frame-selected').data;
                                for (i = 0; i < globalEmpSelected.length; i++) {
                                    $('#employee_origin').append('<input type="hidden" name="employee" value="' + globalEmpSelected[i].id + '"/>');
                                }
                                layer.close(index)
                            }
                        });
                    },
                    error: function (response) {
                        console.log(response.responseText);
                    }
                })
            });
            form.on('select(sending_frequency)', function (data) {
                dayChange(data.value, 1);
            });
        })
    </script>
{% endautoescape %}